// 导入类型、接口、模块、组件、样式
import { postUserApi } from "@/services/user";

import { FC } from "react";
import { useNavigate } from "react-router-dom";
import { checkUsername } from "../../utils/validator";

import { Card, Form, Button, Input, message } from "antd";
import QfUpload from "@/components/qfUpload";

interface Props {}
const Index: FC<Props> = () => {
  const navigate = useNavigate();

  const onFinish = async (formData: USER.PostUserPayloadType) => {
    console.log(1111, formData);

    const { state, msg } = await postUserApi(formData);
    if (state === 201) {
      message.success(msg);
      navigate("/user/index");
    } else {
      message.error(msg);
    }
  };

  return (
    <Card title="用户创建" extra={<Button type="default">返回</Button>}>
      {/* 表单 */}
      <Form size="large" labelCol={{ span: 2 }} onFinish={onFinish}>
        <Form.Item name="card_number" label="会员卡号">
          <Input placeholder="请输入卡号"></Input>
        </Form.Item>
        {/* <Form.Item name="11111" label="*用户名"> */}
        <Form.Item
          name="username"
          label="用户名"
          rules={[
            { required: true, message: "用户名必须" },
            { validator: checkUsername },
          ]}
        >
          <Input placeholder="请输入用户名"></Input>
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: "1111" }]}
        >
          <Input placeholder="请输入密码"></Input>
        </Form.Item>
        <Form.Item label="头像">
          <QfUpload />
        </Form.Item>
        <Form.Item name="address" label="地区">
          <Button type="default">地图选点</Button>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            style={{ marginLeft: "90px" }}
            htmlType="submit"
          >
            立即创建
          </Button>
        </Form.Item>
      </Form>
      {/* 表单 */}
    </Card>
  );
};

export default Index;
